<template>
	<div class="single-result-show-area">
		<div class="left">
			<div class="left-value">
				<el-tag class="each-left-value" v-for="(item, index) in showData.segmentSet" :key="index" :style="{ background: showColorOptions[item.type]['color'] }">{{ item.word }}</el-tag>
			</div>
		</div>
		<div class="right">
			<h2 class="right-name">词性类别图示</h2>
			<div class="right-value">
				<el-tag class="each-right-value" v-for="(item, index) in showColorOptions" :key="index" :style="{ background: item.color }">{{ item.label }}</el-tag>
			</div>
		</div>
	</div>
</template>

<script>
export default {

	props: {
		showData: { type: Object 	}
	},

	data: function () {
		return {
			showColorOptions: { // 显示的颜色类别
				"名词": { label: "名词", color: "#488fce" },
        "时间词": { label: "时间词", color: "#c7aee7;" },
        "标点符号": { label: "标点符号", color: "#ccc" },
        "介词": { label: "介词", color: "#99cc67" },
        "字符串": { label: "字符串", color: "#96dbf8" },
        "数词": { label: "数词", color: "#986699" },
        "副词": { label: "副词", color: "#ffcccb" },
        "形容词": { label: "形容词", color: "#67ccaa" },
        "量词": { label: "量词", color: "#ff9899" },
        "动词": { label: "动词", color: "#ffcb99" },
        "拟声词": { label: "拟声词", color: "#d07f7f" },
        "网页链接": { label: "网页链接", color: "#96dbf8" },
        "连词": { label: "连词", color: "#8ea4de" },
        "连语": { label: "连语", color: "#c9aaca" },
        "代词": { label: "代词", color: "#9acccd" },
        "助词": { label: "助词", color: "#4dd9e6" },
        "语气词": { label: "语气词", color: "#f48363" },
        "限定词": { label: "限定词", color: "#7eca9c" },
        "其他": { label: "其他", color: "#8bc3f5" },
			}
		}
	}

}
</script>

<style lang="less" scoped>
	.single-result-show-area {
		width: 100%;
		height: calc(~'100% - 60px');
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.left, .right {
		float: left;
		height: 100%;
		overflow: auto;
	}

	.left {
		width: 65%;
		border-right: solid 1px #e6e6e6;
	}

	.right {
		width: calc(~'35% - 1px');
		box-sizing: border-box;
		padding: 0 20px;
	}

	.left-value {
		padding: 0 20px;
		box-sizing: border-box;
	}

	.right-name {
		font-family: PingFangSC-Regular;
		letter-spacing: 1px;
		font-size: 18px;
		padding-left: 10px;
		font-weight: 500;
		color: #333333;
	}

	.each-left-value, .each-right-value {
		color: #333333;
		margin: 6px;
		cursor: pointer;
	}
</style>
